<script setup>
import {ref} from "vue";

const regNamePwd = /^[a-zA-Z0-9_-]{4,16}$/;
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/;
const regPhone = /^1[3456789]\d{9}$/;
const registerForm = ref({
  uemail: '',
  uphone: '',
  pwd: ''
})
const regForm = ref({
  uId: '',
  avater: '',
  weChat: '',
  qq: '',
  sex: 1,
  uname: '',
})
const repwd=ref('')
</script>

<template>
  <div>
    <van-nav-bar
        title="注册"
        left-text="返回"
        left-arrow
        @click-left="$router.push('/user')">
    </van-nav-bar>
    <div class="">
      <van-form>
        <van-field label="用户" v-model="regForm.uname" type="text" placeholder="请输入用户"
                   :rules="[{ pattern: regNamePwd, required: true, message: '无效用户名' }]"/>
        <van-field label="密码" v-model="registerForm.pwd" type="password" placeholder="请输入密码"
                   :rules="[{ pattern: regNamePwd, required: true, message: '无效密码' }]"/>
        <van-field label="确认" v-model="repwd" type="password" placeholder="请确认密码"
                   :rules="[{ pattern: regNamePwd, required: true, message: '无效密码' }]"/>
        <van-field label="邮箱" v-model="registerForm.uemail" type="email" placeholder="请输入邮箱"
                   :rules="[{ pattern: regEmail, message: '无效邮箱' }]"/>
        <van-field label="电话" v-model="registerForm.uphone" type="tel" placeholder="请输入电话"
                   :rules="[{ pattern: regPhone, message: '无效手机号码' }]"/>
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="regForm.sex" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="uploader" label="头像">
          <template #input>
            <van-uploader name="avatar" :max-count="1"/>
          </template>
        </van-field>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<style scoped>

</style>